<template>
  <div class="content">
    <div class="area_box">
      <!-- <div class="cat_back el-icon-arrow-left" @click="goBlack">返回</div> -->
      <div class="cat_hd">订单号：{{order.orderSn}}</div>
      <div class="cat_bd">
        <div class="subfield mt20">
          <div class="pay-l">余额支付</div>
          <div class="pay-r">
            支付：<span>{{order.orderPrice}}</span>
          </div>
        </div>

        <div class="cat-bd-con">
          <!-- <div class="con-t-span">余额支付:</div>
          <div class="con-t-select"></div> -->

          <el-radio-group v-model="radio" class="con-t-select-radio">
            <el-radio :label="1">
              余额剩余：（￥{{myInfo.transactionPrice}}）
            </el-radio>
            <!-- <el-radio :label="6"><img class="con-t-watpay" src="../../assets/static/t-07.png" />微信</el-radio> -->
          </el-radio-group>

        </div>

      </div>

      <el-button @click="goBuy" :loading="loading" class="goBuy" type="danger">立即支付</el-button>

    </div>
    <!---余额不足提示---->
    <el-dialog width="400px" :close-on-click-modal="false" title="提示" :visible.sync="littleShow">
      <div style="text-align: center;">
        <h2 style="color: #333; font-size: 16px;">购买余额不足</h2>
        <p style="padding-top: 30px;font-size: 18px;">（当前剩余{{myInfo.transactionPrice}}）</p>
        <!-- <p style="padding-top: 20px;"><el-radio v-model="radio" label="2">3000 余额 （当前剩余0.00）</el-radio></p> -->
        <div class="littleShowbut">
          <div class="but1">
            <router-link tag="a" target="_blank" :to="{path:'./my'}">充 值</router-link>
          </div>
          <div class="but2" @click="close">取 消</div>
        </div>
      </div>
    </el-dialog>

    <!---支付状态提示---->
    <el-dialog width="400px" :close-on-click-modal="false" :show-close="false" :visible.sync="ISpayShow">
      <h2 style="color: #333;text-align: center;    line-height: 40px;">
        <span style="color:#DA2740;font-size:40px;vertical-align: top;" class="el-icon-success" v-if="payOrderOk.orderStatus==201"></span>
        <span style="color:#DA2740;font-size:40px;vertical-align: top;" class="el-icon-error" v-else></span>

        订单支付成功
      </h2>
      <div class="particulars">
        <div class="particulars-item">
          <b>订单号</b>
          <span>{{payOrderOk.orderSn}}</span>
        </div>
        <div class="particulars-item">
          <b>支付方式</b>
          <span>余额支付</span>
        </div>
        <div class="particulars-item">
          <b>订单金额</b>
          <span>￥{{payOrderOk.orderPrice}}</span>
        </div>
        <div class="particulars-item">
          <b>时间</b>
          <span>{{payOrderOk.updateTime}}</span>
        </div>
      </div>
      <div class="littleShowbut">
        <div class="but1" @click="goMy">
          查看订单
        </div>
        <div class="but2" @click="goHome">返回首页</div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import api from '../../api/game'
export default {
  data () {
    return {
      payOrderOk: '',
      littleShow: false,
      ISpayShow: false,
      loading: false,
      radio: 1,
      myInfo: '',
      order: [],
      orderItemFalse: [],
      orderItemOk: []
    }
  },
  mounted () {
    this.order = JSON.parse(sessionStorage.getItem('order'))
    this.orderItemFalse = JSON.parse(sessionStorage.getItem('orderItemFalse'))
    this.orderItemOk = JSON.parse(sessionStorage.getItem('orderItemOk'))
    this.getInfo()
  },
  methods: {
    getInfo () {
      this.$apis.getInfo().then(res => {
        this.myInfo = res.data.data
      })
    },
    goBuy () {
      this.loading = true
      api.FinishOrder({ orderSn: this.order.orderSn }).then(res => {
        this.loading = false
        if (res.data.errno) {
          if (res.data.errno != 0) {
            this.$message.error(res.data.errmsg)
          }
        } else {
          this.ISpayShow = true
          this.payOrderOk = res.data.order
        }
      })
    },
    goMyPay () {},
    goBlack () {
      this.$router.go(-1)
    },
    close () {
      this.littleShow = false
    },
    goHome () {
      this.$router.replace({ path: './' })
    },
    goMy () {
      this.$router.replace({ path: './my', query: { id: 2 } })
    }
  }
}
</script>

<style lang="less" scoped>
.isPayStatus-fd {
}
.littleShowbut {
  margin-top: 20px;
  display: flex;
  overflow: hidden;
  justify-content: space-around;
  div {
    width: 170px;
    height: 44px;
    font-size: 16px;
    border: 1px solid #d82241;
    text-align: center;
    line-height: 44px;
    cursor: pointer;
  }
  .but1 {
    background: #da2740;
    color: #ffffff;
    a {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
  .but2 {
    background: #fff9f8;
    color: #d82241;
  }
}

.particulars {
  margin: 30px 0px;
  padding: 15px;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.particulars-item {
  display: flex;
  line-height: 30px;
  b {
    color: #444444;
    font-size: 14px;
    flex: 1;
  }
  span {
    color: #888888;
    font-size: 16px;
    flex: 3;
  }
}
.area_box {
}
.content {
  min-width: 66%;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 30px;
  padding: 30px 0px;
  margin-bottom: 32vh;
}

.item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.cat-bd-con {
  border-top: 1px solid #eeeeee;
  margin-top: 20px;
  padding-top: 30px;
  margin-bottom: 30px;
}

.pay-l {
  font-size: 20px;

  font-weight: 600;
  color: #444444;
  height: 40px;
  line-height: 40px;
  padding-left: 60px;
  background: url("../../assets/static/t-08.png") no-repeat;
  background-size: 40px 40px;
}
.pay-r {
  font-size: 14px;

  font-weight: 600;
  color: #444444;
}
.pay-r span {
  font-size: 24px;

  font-weight: 600;
  color: #da2740;
}
.con-t-span {
  font-size: 18px;

  font-weight: 600;
  color: #444444;
}

.goBuy {
  height: 50px;

  width: 180px;

  background: #da2740;
  color: #ffffff;
  font-size: 18px;

  font-weight: 400;
  color: #ffffff;
  text-align: center;
  cursor: pointer;
  margin-top: 20px;
  white-space: nowrap;
}
.out {
  width: 320px;
  height: 320px;
  background: #f5f7fa url("../../assets/static/t-09.png") no-repeat center
    center;
  line-height: 580px;
  color: #bbb;
  text-align: center;
  font-size: 28px;
}
.qrCodeUrl {
  text-align: center;
  width: 320px;
  height: 320px;
  margin: auto;
  position: relative;
}
</style>
